import echarts from "echarts";
function getRecordPersonNum(record) {
  //console.log(record);
  let index = [0, 0, 0, 0, 0, 0];
  let Data = {
    library: [], //图书馆
    Brestaurant: [], //北苑餐厅
    Nrestaurant: [], //南苑餐厅
    ZhenTaiFloor: [], //镇泰楼
    teachBuild: [], //教学楼
    gym: [], //体育馆
  };
  Data.library = record;
  Data.Brestaurant = record;
  Data.Nrestaurant = record;
  Data.ZhenTaiFloor = record;
  Data.teachBuild = record;
  Data.gym = record;
  for (let k = 0; k < record.length; k++) {
    if (record[k].area.name === "北苑餐厅") {
      record[k].direction === "A"
          ? (Data.Brestaurant[index[0]].Bstate = "进入")
          : (Data.Brestaurant[index[0]].Bstate = "离开");
      Data.Brestaurant[index[0]].Bname = record[k].person.name;
      Data.Brestaurant[index[0]].Bphone = record[k].person.phone;
      index[0]++;
    }
    if (record[k].area.name === "南苑餐厅") {
      record[k].direction === "A"
          ? (Data.Nrestaurant[index[1]].Nstate = "进入")
          : (Data.Nrestaurant[index[1]].Nstate = "离开");
      Data.Nrestaurant[index[1]].Nname = record[k].person.name;
      Data.Nrestaurant[index[1]].Nphone = record[k].person.phone;
      index[1]++;
    }
    if (record[k].area.name === "教学楼") {
      record[k].direction === "A"
          ? (Data.teachBuild[index[2]].Tstate = "进入")
          : (Data.teachBuild[index[2]].Tstate = "离开");
      Data.teachBuild[index[2]].Tname = record[k].person.name;
      Data.teachBuild[index[2]].Tphone = record[k].person.phone;
      index[2]++;
    }
    if (record[k].area.name === "体育馆") {
      record[k].direction === "A"
          ? (Data.gym[index[3]].Gstate = "进入")
          : (Data.gym[index[3]].Gstate = "离开");
      Data.gym[index[3]].Gname = record[k].person.name;
      Data.gym[index[3]].Gphone = record[k].person.phone;
      index[3]++;
    }
    if (record[k].area.name === "镇泰楼") {
      record[k].direction === "A"
          ? (Data.ZhenTaiFloor[index[4]].Zstate = "进入")
          : (Data.ZhenTaiFloor[index[4]].Zstate = "离开");
      Data.ZhenTaiFloor[index[4]].Zname = record[k].person.name;
      Data.ZhenTaiFloor[index[4]].Zphone = record[k].person.phone;
      index[4]++;
    }

    if (record[k].area.name === "图书馆") {
      record[k].direction === "A"
          ? (Data.library[index[5]].Lstate = "进入")
          : (Data.library[index[5]].Lstate = "离开");
      Data.library[index[5]].Lname = record[k].person.name;
      Data.library[index[5]].Lphone = record[k].person.phone;
      index[5]++;
    }
  }
  console.log(Data);
  return Data;
}
function getPersonStateNum(record) {
  let Data = record;
  let countData = [{ 1: [] }, { 1: [] }, { sumData: [] }];
  // for (let i = 0; i < Data.length; i++) {
  //   if(Data.){

  //   }

  //}
  return countData;
}
function getBar() {
  var myChart = echarts.init(document.getElementById("bar"));
  var myData = ["图书馆", "南苑餐厅", "北苑餐厅", "教学楼", "镇泰楼", "体育馆"];
  var lineData = [100, 100, 100, 100, 100, 100];
  var lastYearData = {
    1: [33, 20, 62, 34, 55, 65],
  };
  var thisYearData = {
    1: [11, 38, 23, 49, 66, 66],
  };
  var timeLineData = [1];
  //var background = "#5c33f0"; //背景

  var option = {
    baseOption: {
      //backgroundColor: background,
      timeline: {
        show: false,
        top: 0,
        data: [],
      },
      legend: {
        top: "5%",
        left: "31%",
        itemWidth: 22,
        itemHeight: 22,
        itemGap: 140,
        icon: "horizontal",
        textStyle: {
          color: "#ffeb7b",
          fontSize: 15,
        },
        data: ["进入", "离开"],
      },
      grid: [
        {
          show: false,
          left: "5%",
          top: "10%",
          bottom: "8%",
          containLabel: true,
          width: "37%",
        },
        {
          show: false,
          left: "51%",
          top: "10%",
          bottom: "8%",
          width: "0%",
        },
        {
          show: false,
          right: "2%",
          top: "10%",
          bottom: "8%",
          containLabel: true,
          width: "37%",
        },
      ],
      xAxis: [
        {
          type: "value",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: "top",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          show: false,
        },
        {
          gridIndex: 2,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: "top",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          inverse: true,
          position: "right",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },
        {
          gridIndex: 1,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffeb7b",
              fontSize: 15,
            },
          },
          data: myData.map(function(value) {
            return {
              value: value,
              textStyle: {
                align: "center",
              },
            };
          }),
        },
        {
          gridIndex: 2,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },
      ],
      series: [],
    },
    options: [],
  };

  option.baseOption.timeline.data.push(timeLineData[0]);
  option.options.push({
    series: [
      {
        type: "pictorialBar",
        xAxisIndex: 0,
        yAxisIndex: 0,
        symbol: "rect",
        itemStyle: {
          normal: {
            color: "rgba(3,147,114,0.27)",
          },
        },
        barWidth: 10,
        symbolRepeat: true,
        symbolSize: 14,
        data: lineData,
        barGap: "-100%",
        barCategoryGap: 0,
        label: {
          normal: {
            show: true,
            formatter: (series) => {
              return lastYearData[timeLineData[0]][series.dataIndex];
            },
            position: "insideTopLeft",
            textStyle: {
              color: "#ffeb7b",
              fontSize: 20,
            },
            offset: [0, -35],
          },
        },
        z: -100,
        animationEasing: "elasticOut",
        animationDelay: function(dataIndex, params) {
          return params.index * 30;
        },
      },
      {
        name: "进入",
        type: "pictorialBar",
        xAxisIndex: 0,
        yAxisIndex: 0,
        symbol: "rect",
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: "#4745cf",
          },
        },
        symbolRepeat: true,
        symbolSize: 14,
        data: lastYearData[timeLineData[0]],
        animationEasing: "elasticOut",
        animationDelay: function(dataIndex, params) {
          return params.index * 30 * 1.1;
        },
      },
      {
        type: "pictorialBar",
        xAxisIndex: 2,
        yAxisIndex: 2,
        symbol: "rect",
        itemStyle: {
          normal: {
            color: "rgba(54,215,182,0.27)",
          },
        },
        barWidth: 10,
        symbolRepeat: true,
        symbolSize: 14,
        data: lineData,
        barGap: "-100%",
        barCategoryGap: 0,
        label: {
          normal: {
            show: true,
            formatter: (series) => {
              return thisYearData[timeLineData[0]][series.dataIndex];
            },
            position: "insideTopRight",
            textStyle: {
              color: "#ffeb7b",
              fontSize: 20,
            },
            offset: [0, -35],
          },
        },
        z: -100,
        animationEasing: "elasticOut",
        animationDelay: function(dataIndex, params) {
          return params.index * 30;
        },
      },
      {
        name: "离开",
        type: "pictorialBar",
        xAxisIndex: 2,
        yAxisIndex: 2,
        symbol: "rect",
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: "#4745cf",
          },
        },
        symbolRepeat: true,
        symbolSize: 14,
        data: thisYearData[timeLineData[0]],
        animationEasing: "elasticOut",
        animationDelay: function(dataIndex, params) {
          return params.index * 30 * 1.1;
        },
      },
    ],
  });
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
}

export { getBar, getRecordPersonNum, getPersonStateNum };
